<template>
  <div class="main">
    <div class="top_box">
      <div class="title">
        <img class="t_icon" src="../../assets/icon_t1.png" alt="" />
        <span style="font-weight:bold;font-size:17px">机构入驻审批统计</span>
      </div>
      <el-row class="list">
        <el-col class="item_box" :span="6">
          <div class="item">
            <img src="../../assets/itemBg1.png" class="item_bg" alt="" />
            <img src="../../assets/icon1.png" class="item_icon" alt="" />
            <div class="right_txt">
              <p>全部机构</p>
              <p>{{homeInfoData.firmCount.fTotalCount}}</p>
            </div>
          </div>
        </el-col>
        <el-col class="item_box" :span="6">
          <div class="item">
            <img src="../../assets/itemBg2.png" class="item_bg" alt="" />
            <img src="../../assets/icon2.png" class="item_icon" alt="" />
            <div class="right_txt">
              <p>待审机构</p>
              <p>{{homeInfoData.firmCount.fResult0}}</p>
            </div>
          </div>
        </el-col>
        <el-col class="item_box" :span="6">
          <div class="item">
            <img src="../../assets/itemBg3.png" class="item_bg" alt="" />
            <img src="../../assets/icon3.png" class="item_icon" alt="" />
            <div class="right_txt">
              <p>已通过机构</p>
              <p>{{homeInfoData.firmCount.fResult1}}</p>
            </div>
          </div>
        </el-col>
        <el-col class="item_box" :span="6">
          <div class="item">
            <img src="../../assets/itemBg4.png" class="item_bg" alt="" />
            <img src="../../assets/icon4.png" class="item_icon" alt="" />
            <div class="right_txt">
              <p>未通过机构</p>
              <p>{{homeInfoData.firmCount.fResult2}}</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="middle_box">
      <div class="left_box">
        <div class="title">
          <img class="t_icon" src="../../assets/icon_t2.png" alt="" />
          <span  style="font-weight:bold;font-size:17px">学员数量统计</span>
        </div>
        <el-row class="list">
          <el-col :span="8" class="item"
            ><div id="chartPie" class="pie-wrap"></div>
            <span>学员总计</span></el-col
          >
          <el-col :span="8" class="item"
            ><div id="chartPie2" class="pie-wrap"></div>
            <span>在读学员</span></el-col
          >
          <el-col :span="8" class="item"
            ><div id="chartPie3" class="pie-wrap"></div>
            <span>销课学员</span></el-col
          >
        </el-row>
      </div>
      <div class="right_box">
        <div class="title">
          <img class="t_icon" src="../../assets/icon_t3.png" alt="" />
          <span  style="font-weight:bold;font-size:17px">资金监控统计（万元）</span>
        </div>
        <div class="list">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="item">
                <img src="../../assets/icon5.png" alt="" />
                <div class="msg">
                  <p>{{homeInfoData.moneyCount.total}}</p>
                  <p>总监管金额</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <img src="../../assets/icon6.png" alt="" />
                <div class="msg">
                  <p>{{homeInfoData.moneyCount.already}}</p>
                  <p>已划拨金额</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <img src="../../assets/icon7.png" alt="" />
                <div class="msg">
                  <p>{{homeInfoData.moneyCount.need}}</p>
                  <p>待划拨金额</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
     <div class="bot_box">
      <div class="left_box">
        <div class="title">
          <img class="t_icon" src="../../assets/icon_t4.png" alt="" />
          <span  style="font-weight:bold;font-size:17px">我的代办</span>
        </div>
        <div class="top_tit">
          <div @click="clickChange(1)" style="cursor: pointer;margin-right:188px">
            <div  class="top_tit_item  " :class="{'on':index==1, 'active':index==1}" >  入驻审批任务 <span>{{homeInfoData.firmCount.fResult0}}</span>
          </div
          >
          </div>
          <div  @click="clickChange(2)" style="cursor: pointer;margin-right:188px">
             <div class="top_tit_item"  :class="{'on':index==2, 'active':index==2}"
            >举报核实任务 <span>{{homeInfoData.reportCount.rNeedCount}}</span></div
          >
          </div>
          <div  @click="clickChange(3)" style="cursor: pointer;">
             <div  class="top_tit_item" @click="clickChange(3)"  :class="{'on':index==3, 'active':index==3}"
            >联合执法任务 <span>{{homeInfoData.reportCount.rLawResultNo}}</span></div
          >
          </div>
        </div>
        <el-table
          :header-cell-style="{ background: '#f5f7fa' }"
          @row-click="leftTableShowRowClick"
          :data="tableData"
          stripe
          height="250px"
          style="width: 100%"
        >
          <el-table-column :prop="prop1" :label="name1"> </el-table-column>
          <el-table-column :prop="prop2" :label="name2"> </el-table-column>
          <el-table-column :prop="prop3" :label="name3"> </el-table-column>
        </el-table>
      </div>
      <div class="right_box">
        <div class="title">
          <img class="t_icon" src="../../assets/icon_t5.png" alt="" />
          <span  style="font-weight:bold;font-size:17px">举报监督统计</span>
        </div>
        <div style="display:flex;" >
           <div id="chartPie4" class="pie-wrap2">
          </div>
          <div  >
            <div style="dispaly:block;display:flex;width:110px;margin-bottom:20px;margin-top:60px;margin-right:30px;align-items: center;"> <span style="display:block;width:10px;height:10px;background-color:gray;border-radius:50% ;margin-right:5px"></span> <span>总举报: {{homeInfoData.reportCount.rTotalCount}}</span> </div>
            <span style="dispaly:block;display:flex;width:110px;margin-bottom:20px;margin-right:30px;align-items:center ;"> <span style="display:block;width:10px;height:10px;background-color:#1191FF;border-radius:50%  ;margin-right:5px"></span> 待核实: {{homeInfoData.reportCount.rNeedCount}}</span>
            <span style="dispaly:block;display:flex;width:110px;margin-bottom:20px;margin-right:30px;align-items:center ;"> <span style="display:block;width:10px;height:10px;background-color:#1136FF;border-radius:50% ;margin-right:5px"></span> 核实属实: {{homeInfoData.reportCount.rAuditResult0}}</span>
            <span style="dispaly:block;display:flex;width:110px;margin-bottom:20px;margin-right:30px;align-items:center ;"> <span style="display:block;width:10px;height:10px;background-color:#FF8455;border-radius:50%  ;margin-right:5px"></span> 核实不属实: {{homeInfoData.reportCount.rAuditResult1-1}}</span>
            <span style="dispaly:block;display:flex;width:110px;margin-bottom:20px;margin-right:30px;align-items: center;"> <span style="display:block;width:10px;height:10px;background-color:gray;border-radius:50%  ;margin-right:5px"></span> 待执法: {{homeInfoData.reportCount.rLawResultNo}}</span>
            <span style="dispaly:block;display:flex;width:110px;align-items: ;"> <span style="display:block;width:10px;height:10px;background-color:#FFB980;border-radius:50% ;margin-right:5px"></span> 已执法 : {{homeInfoData.reportCount.rLawResultOk}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); //引入主题
export default {
  data() {
    return {
      prop1:'firmName',
      prop2:'createTime',
      prop3:'address',
      name1:'任务名称',
      name2:'提交时间',
      name3:'地址',
      index:1,
      chartPie: null,
      tableData: [
        {
          date: "星光教育培训入驻",
          name: "学科类",
          address: '2021-05-06  08:00:53"',
        },
        {
          date: "星光教育培训入驻",
          name: "学科类",
          address: '2021-05-06  08:00:53"',
        },
        {
          date: "星光教育培训入驻",
          name: "学科类",
          address: '2021-05-06  08:00:53"',
        },

        {
          date: "星光教育培训入驻",
          name: "学科类",
          address: '2021-05-06  08:00:53"',
        },
      ],
        chartPie:1222,//学员总计1
      chartPie2:1453,//学员总计2
      chartPie3:609,//学员总计3
      task1:2,//入驻审批任务
      task2:5,//举报核实任务
      task3:7,//联合执法任务
      pieCount:0, //pie总值
      data:{ value1:1222,value2:43, value3:199},
      homeInfoData:null,
      listData1:[],
      listData2:[],
      listData3:[]
    };
  },
  mounted() {
    this.getHomeInfotData()
  },
  methods: {
    // 我的代办表格列表每一行点击事件
    leftTableShowRowClick:function(val){
      console.log('获取点击的每一行的数据',val.firmId,val.result)
      if(this.index==1){
        console.log('走的是index=1',this.index)
        let type=''
        if(val.result==0){
          type="D"
        }else if(val.result==2){
          type="W"
        }else{
          type="Y"
        }
        this.$router.push(
          { name: 'check-particulars',
           params: {id:type,firmId:val.firmId,} 
          }
        )
      }else if(this.index==2){
        console.log('走的是index=1',val.reportId,val.type)
        let type=""
        if(val.type==0){
          type="0"
        }else {
          type="1"
        }
        this.$router.push(
          { name: 'inform-particulars',
           params: {id:type,reportId:val.reportId,} 
          }
        )
      }else{
          console.log('走的是index=2',this.index,val)
          let type=""
          if(val.type==1){
            type="1"
          }else {
            type="2"
          }
           this.$router.push(
          { name: 'enforce-particulars',
           params: {id:type,reportId:val.reportId} 
          }
        )
      }
    },
    clickChange(e){
      console.log('打印',e)
      this.index=e
      if(e==1){
        let data=this.listData1
        this.tableData=data
        this.prop1='firmName'
        this.prop2='createTime'
        this.prop3='address'
        this.name1='任务名称'
        this.name2='提交时间'
        this.name3='地址'

      }else if(e==2 ){
        let data=this.listData2
        this.tableData=data
         this.prop1='firmName'
        this.prop2='createTime'
        this.prop3='complaintType'
        this.name1='举报名称'
        this.name2='举报时间'
        this.name3='举报类型'
      }else{
        let data=this.listData3
        this.tableData=data
        this.prop1='firmName'
        this.prop2='createTime'
        this.prop3='complaintType'
        this.name1='举报名称'
        this.name2='举报时间'
        this.name3='举报类型'
      }
    },
     getHomeInfotData(){//获取首页数据
       this.$http({
          url: this.$http.adornUrl('/sys/home/info'),
          method: 'get',
          data:{}
        }).then(res=>{
          console.log('获取首页的最终所有数据',res)
          if(res.status==200){
            this.homeInfoData=res.data.data
            this.tableData=res.data.data.showFirm
            this.listData1=res.data.data.showFirm
            this.listData2=res.data.data.showAudit
            this.listData3=res.data.data.showLaw
              var data={
                rNeedCount:res.data.data.reportCount.rNeedCount,//待核实
                rAuditResult0:res.data.data.reportCount.rAuditResult0,//核实属实
                rAuditResult1:res.data.data.reportCount.rAuditResult1-1,//核实不属实
                rLawResultOk:res.data.data.reportCount.rLawResultOk//已执法
              }
              this.$nextTick(() => {
                this.pieCount =  res.data.data.studentCount.sTotalCount;
                this.drawPieChart("chartPie", "#4362ff", "#f0efef", res.data.data.studentCount.sTotalCount);
                this.drawPieChart("chartPie2", "#ffa920", "#f0efef", res.data.data.studentCount.sResult0);
                this.drawPieChart("chartPie3", "#24bf81", "#f0efef", res.data.data.studentCount.sResult2);
                this.drawPieChartT("chartPie4", "#1191ff", "#1136ff", "#ff8455", data);
               });
          }
          console.log('获取首页的最终所有数据获取首页的最终所有数据获取首页的最终所有数据获取首页的最终所有数据', this.homeInfoData)
        })
    },
      drawPieChart(chartPie, coler1, coler2, num) {
      this.chartPie = echarts.init(
        document.getElementById(chartPie),
        "macarons"
      );
      this.chartPie.setOption({
        title: {
          text: "",
          textStyle: {
            fontSize: "10",
            x: "left",
            color: coler1,
          },
        },
        color: [coler1, coler2],
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            silent: true,
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{b|{c}}",
                color: coler1,
                rich: {
                  a: {
                    color: coler1,
                    align: "center",
                    fontSize: "10",
                  },
                  b: {
                    color: coler1,
                    align: "center",
                    fontSize: "20",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                name: "a",
                value: num,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                name: "b",
                value: this.pieCount - num,
              },
            ],
          },
        ],
      });
    },
     drawPieChartT(chartPie, coler1, coler2, coler3, data) {
      this.chartPie = echarts.init(
        document.getElementById(chartPie),
        "macarons"
      );
      this.chartPie.setOption({
        title: {
          text: "",
          textStyle: {
            fontSize: "10",
            x: "left",
            color: coler1,
          },
        },
        tooltip: {//鼠标悬浮提示框
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: "0%",
          top: "50%",
          icon: "circle",
          formatter: function (name) {
            var index = 0;
            var clientlabels = ["待核实", "核实属实", "核实不属实", "已执法"];
            var clientcounts = [889, 88, 26];
            clientlabels.forEach(function (value, i) {
              if (value == name) {
                index = i;
              }
            });
            return name + "  " + clientcounts[index];
          },
        },
        color: [coler1, coler2, coler3],
        series: [
          {
            name: "状态",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data.rNeedCount, name: "待核实" },
              { value:data.rAuditResult0, name: "核实属实" },
              { value: data.rAuditResult1, name: "核实不属实" },
              { value: data.rLawResultOk, name: "已执法" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.active{
  font-weight: bold;
}
.main {
  width: 100%;
  height: 100vh;
  min-height: 980px;
  background: #edf0f1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
div {
  box-sizing: border-box;
}
.title {
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 70px;
  font-size: 18px;
  border-bottom: 1px solid #f0f0f0;
}
.t_icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.top_box {
  width: 100%;
  height: 28.5%;
  min-height: 280px;
  background: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 0 20px;
}
.top_box .list {
  height: calc(100% - 70px);
}
.top_box .list .item_box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top_box .item {
  position: relative;
  width: 288px;
  height: 128px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px 10px 20px;
  z-index: 1;
  transition: all 0.5s;
}
.top_box .item:hover {
  transform: translateY(-2px);
}
.top_box .item .item_icon {
  display: block;
  width: 115px;
  height: 115px;
  animation: 1s mymove infinite alternate;
}
.top_box .item .right_txt p:nth-of-type(1) {
  font-size: 16px;
  color: #919297;
}
.top_box .item .right_txt p:nth-of-type(2) {
  font-size: 40px;
  color: #10182e;
  font-weight: bold;
  margin-top: 10px;
}
.item_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.middle_box {
  width: 100%;
  height: 24%;
  min-height: 216px;
  display: flex;
  justify-content: space-between;
}
.middle_box .left_box {
  width: 44.3%;
  background-color: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 0 20px;
}
.middle_box .left_box .list {
  height: calc(100% - 70px);
}
.middle_box .left_box .list .item {
  position: relative;
}
.middle_box .left_box .list .item span {
  position: absolute;
  top: 10px;
  right: 10%;
}
.middle_box .left_box .list .item:nth-of-type(1) span::before {
  content: "";
  display: inline-block;
  transform: translateY(29%);
  width: 12px;
  height: 12px;
  border: 5px solid #4362ff;
  border-radius: 50%;
  -webkit-transform: translateY(29%);
  -moz-transform: translateY(29%);
  -ms-transform: translateY(29%);
  -o-transform: translateY(29%);
  margin-right: 5px;
}
.middle_box .left_box .list .item:nth-of-type(2) span::before {
  content: "";
  display: inline-block;
  transform: translateY(29%);
  width: 12px;
  height: 12px;
  border: 5px solid #ffa920;
  border-radius: 50%;
  -webkit-transform: translateY(29%);
  -moz-transform: translateY(29%);
  -ms-transform: translateY(29%);
  -o-transform: translateY(29%);
  margin-right: 5px;
}
.middle_box .left_box .list .item:nth-of-type(3) span::before {
  content: "";
  display: inline-block;
  transform: translateY(29%);
  width: 12px;
  height: 12px;
  border: 5px solid #24bf81;
  border-radius: 50%;
  -webkit-transform: translateY(29%);
  -moz-transform: translateY(29%);
  -ms-transform: translateY(29%);
  -o-transform: translateY(29%);
  margin-right: 5px;
}
.middle_box .right_box {
  width: 54.7%;
  background-color: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 0 20px;
}
.pie-wrap {
  width: 160px;
  height: 160px;
}
.pie-wrap2 {
  width:70%;
  height: 300px;
}
.middle_box .right_box .list {
  padding: 15px 10px 24px;
  height: calc(100 - 70px);
}
.middle_box .right_box .list .item {
  display: flex;
  align-items: center;
  /*width: 264px;
    */
  height: 112px;
  padding: 28px 0 28px 16px;
  border-radius: 10px;
  box-shadow: 0px 0px 12px 0px rgba(30, 54, 81, 0.16);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  transition: all 0.5s;
}
.middle_box .right_box .list .item:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 12px 0px rgba(30, 54, 81, 0.36);
}
.middle_box .right_box .list .item img {
  width: 56px;
  height: 56px;
  margin-right: 16px;
  background-color: #fffeee;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.middle_box .right_box .list .item .msg p:nth-of-type(1) {
  font-size: 24px;
  font-weight: bold;
  color: #10182e;
}
.middle_box .right_box .list .item .msg p:nth-of-type(2) {
  font-size: 14px;
  color: #919297;
  margin-top: 10px;
}
.bot_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 41.8%;
  min-height: 416px;
}
.bot_box .left_box {
  width: 55%;
  height: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.bot_box .left_box .top_tit {
  padding: 16px 10px;
  display: flex;
}
.bot_box .left_box .top_tit .top_tit_item {
  position: relative;
}
.bot_box .left_box .top_tit .top_tit_item span {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #ff0000;
  color: #fff;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.bot_box .left_box .top_tit .top_tit_item.on::before {
  content: "";
  background-color: #4362ff;
}
.bot_box .left_box .top_tit .top_tit_item::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #919297;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  font-weight: bold;
}
.bot_box .right_box {
  width: 44%;
  height: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background-color: #f5f7fa; /*隔行变色*/
}
@keyframes mymove {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(-5px);
  }
}
</style>
